<template>
	<view class="center">
		<!-- <view class="tit"></view>
		<view class="title">
			<image src="../../../../static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<text>客户名称</text>
			<view class="ima">
				<text>确定</text>
			</view>
		</view> -->
		<hea-ders title="客户名称">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<text slot='official' @click="Sizer">确定</text>
		</hea-ders>
		 <bm-search-input :isHistory="true"
		                 :lists_title="search_result_title"
		                 :lists_note="search_result_note"
		                 :input_length="my_input_length"
		                 :lists="suggestion_lists"
		                 v-on:parent_get_lists="get_selected_lists"
		                 v-on:parent_search="finish_search"
		class="inpu" ></bm-search-input>
	</view>
</template>

<script>
	import bmSearchInput from '@/components/bm-searchInput/bm-searchInput'
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			bmSearchInput,
			heaDers
		},
		data() {
			return {
				//搜索结果中的标题
				search_result_title: [],
				//搜索结果中的备注(不需要可以删掉)
				search_result_note: [],
				// 搜索建议列表
				suggestion_lists: [],
				// 自定义搜索框长度
				my_input_length: "100%"
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			get_selected_lists(input_content) {
				console.log("用户输入了", input_content); // 用户输入的内容
				// eslint-disable-next-line no-console
				//发送请求，获取建议列表
				uni.request({
					url: '../static/bm-searchInput/demo.json', // 这里以本地资源demo.json为例
					method: "GET",
					header: {
						'content-type': "application/x-www-form-urlencoded"
					},
					data: input_content, // 传入用户输入的内容
					success: (res) => {
						// console.log("res",res);
						this.suggestion_lists = res.data; // 将值传递给子组件
					}
				});
			},
			finish_search(input_content) {
				console.log("用户要搜索", input_content);
				//搜索框显示完成，页面展示搜索结果
				//这里写入你之后想要运行的程序
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background: rgba(245, 245, 245, 1);

		.tit {
			width: 100%;
			height: 50rpx;
			box-sizing: border-box;
		}

		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			image {
				width: 22rpx;
			}

			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}

			.ima {
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}
		.inpu{
			margin-top: 30rpx;
		}
	}
</style>
